<script lang="ts">
export default {
  name: "xt-cascader",
};
</script>

<script setup lang="ts">
import { getCurrentInstance, ref } from "vue";
import { ElCascader } from "element-plus";
import useRefHook from "../../../hooks/ref";
import type { CascaderValue } from "element-plus";
import type Typings from "../../../typings";

const { INSTANCE, getInstance } = useRefHook();

interface Props extends /* @vue-ignore */ Typings.Cascader.props {
  options: Typings.Common.option[];
  props?: Typings.Cascader.props["props"];
  clearable?: Typings.Cascader.props["clearable"];
  popperClass?: Typings.Cascader.props["popperClass"];
  placeholder?: Typings.Cascader.props["placeholder"];
  filterable?: Typings.Cascader.props["filterable"];
}

withDefaults(defineProps<Props>(), {
  options: () => [],
  props: () => ({}),
  clearable: true,
  popperClass: "",
  placeholder: "请选择",
  filterable: true,
});

const emit = defineEmits(["change"]);

const handleChange = (data: CascaderValue) => {
  emit("change", data, INSTANCE.value);
};

defineExpose({
  getInstance,
});
</script>

<template>
  <el-cascader
    class="xt-cascader"
    ref="INSTANCE"
    :options="options"
    :props="{ label: 'name', value: 'code', ...props }"
    :clearable="clearable"
    :filterable="filterable"
    :popperClass="`xt-cascader-popper ${popperClass}`"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-cascader>
</template>

<style lang="scss">
@use "../../../scss/xt-cascader.scss";
</style>
